<template>
  <div class="app-container">
    <div id="" class="header">
      <div id="" class="title_search">
        <el-input
          class="search_input"
          v-model="req_xin_xi.keyword"
          placeholder="搜索关键字"
          clearable
        ></el-input>
      </div>
      <div class="block">
        <el-date-picker
          :clearable="true"
          class="search_time"
          prefix-icon="1"
          v-model="time"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          @change="select_time"
        >
        </el-date-picker>
      </div>
      <el-select
        clearable
        style="width: 150px"
        @change="change1"
        v-model="fuze_name"
        :filterable="true"
        :multiple="false"
        :remote='true'
        reserve-keyword
        placeholder="搜索负责人"
        :remote-method="remoteMethod"
        :loading="loading"
      >
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.real_name"
          :value="item.uid"
        >
        </el-option>
      </el-select>
      <el-select
        clearable
        style="width: 150px"
        @change="change2"
        v-model="peihe_name"
        :filterable="true"
        :multiple="false"
        :remote='true'
        reserve-keyword
        placeholder="搜索配合人"
        :remote-method="remoteMethod2"
        :loading="loading"
      >
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.real_name"
          :value="item.uid"
        >
        </el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="search"
        >搜索</el-button
      >
      <el-button type="primary" icon="el-icon-refresh-right" @click="refresh"
        >刷新</el-button
      >
    </div>

    <el-table
      v-loading="table_loading"
      :data="rolesList"
      style="width: 100%; margin-top: 30px"
      border
    >
      <el-table-column align="center" label="id" width="50" prop="id">
      </el-table-column>
      <el-table-column
        align="center"
        label="结算单号"
        width="220"
        prop="statement_num"
      >
      </el-table-column>
      <el-table-column align="center" label="合同编号" prop="contract_num">
      </el-table-column>
      <el-table-column align="center" label="合同标题" prop="contract_title">
      </el-table-column>
      <el-table-column align="center" label="结算单总额" prop="total_price">
      </el-table-column>
      <el-table-column align="center" label="回款金额" prop="back_price">
      </el-table-column>
      <el-table-column align="center" label="发票金额" prop="invoice_price">
      </el-table-column>
      <el-table-column align="center" label="回款进度">
        <template slot-scope="scope">
          <el-progress
            :text-inside="true"
            :stroke-width="26"
            :percentage="scope.row.progress"
          ></el-progress>
        </template>
      </el-table-column>
      <el-table-column align="center" label="类型" prop="type_str">
      </el-table-column>
      <!-- <el-table-column align="center" label="操作" width="120">
        <template slot-scope="scope">
          <div id="cao_zuo" class="cao_zuo">
            <el-button
              type="success"
              size="mini"
              icon="el-icon-edit"
              @click="handleEdit(scope)"
            ></el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              class="del"
              @click="handleDelete(scope)"
            >
            </el-button>
          </div>
        </template>
      </el-table-column> -->
    </el-table>
    <!-- 翻页组件 -->
    <div id="" class="pages">
      <el-pagination
        @size-change="size_change"
        background
        @current-change="current_change"
        :current-page="req_xin_xi.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="req_xin_xi.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      >
      </el-pagination>
    </div>
    <!-- 翻页组件 -->
  </div>
</template>

<script>
import { get_no_list } from "@/api/hui_kuan/index.js";
import { get_userlist } from "@/api/user/get_list.js";
export default {
  name: "huikuan_has",
  data() {
    return {
      // 搜索时间
      time: "",
      table_loading: false,
      // 负责人名字
      fuze_name: "",
      // 配合人名字
      peihe_name: "",
      // 多少条数据
      count: 0,
      role: {},
      // 数据列表
      rolesList: [],
      dialogVisible: false,
      checkStrictly: false,
      // 请求数据时提交的信息
      req_xin_xi: {
        page: 1,
        limit: 10,
        has_backmoney: 1,
        keyword: "",
        search_time: "",
        fuze_uid: "",
        peihe_uid: "",
      },
      // 负责人列表
      options1: [],
      // 配合人列表
      options2: [],
      loading: false,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {
    this.get_list();
  },
  methods: {
    // 负责人搜索
    remoteMethod(e) {
      if (e !== "") {
        this.loading = true;
        get_userlist({ keyword: e }).then((res) => {
          this.loading = false;
          this.options1 = res.data;
        });
      } else {
        this.options1 = [];
      }
    },
    // 配合人搜索
    remoteMethod2(e) {
       if (e !== "") {
        this.loading = true;
        get_userlist({ keyword: e }).then((res) => {
          this.loading = false;
          this.options2 = res.data;
        });
      } else {
        this.options2 = [];
      }
    },
    // 选择负责人
    change1(e) {
      this.req_xin_xi.fuze_uid = e;
    },
    // 选择配合人
    change2(e) {
      this.req_xin_xi.peihe_uid = e;
    },
    // 刷新
    refresh() {
      this.peihe_name = "";
      this.fuze_name = "";
      this.time = ''
      this.req_xin_xi = {
        page: 1,
        limit: 10,
        has_backmoney: 1,
        keyword: "",
        search_time: "",
        fuze_uid: "",
        peihe_uid: "",
      };
      this.get_list();
    },
    // 获取数据
    get_list() {
      this.table_loading = true;
      get_no_list(this.req_xin_xi).then((res) => {
        this.table_loading = false;
        this.count = res.data.count;
        this.rolesList = res.data.list;
      });
    },
    // 搜索
    search() {
      this.get_list();
    },
    // 翻页
    current_change(e) {
      this.req_xin_xi.page = e;
      this.get_list();
    },
    // 一页显示多少条变化
    size_change(e) {
      this.req_xin_xi.limit = e;
      this.get_list();
    },
    // 时间确定
    select_time(e) {
      this.req_xin_xi.search_time = e.join(",");
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 30px;
  }
}

.del {
  margin: 0;
}

.header {
  display: flex;
}

.title_search {
  display: flex;
  width: 202px;
  align-items: center;
}

// 翻页组件居中
.pages {
  display: flex;
  padding-top: 20px;
}
.search_time {
  width: 240px;
}
.cao_zuo {
  display: flex;
  justify-content: space-between;
}
</style>
